<template>
    <div class="permission-management">
        <div class="page-header">
            <h1>角色权限管理</h1>
        </div>

        <div class="search-container">
            <a-input-search placeholder="输入角色名称搜索" v-model:value="searchText" @search="handleSearch" enterButton />
        </div>

        <div class="permission-content">
            <a-table :columns="columns" :data-source="permissionData" row-key="id" :pagination="false">
                <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'actions'">
                        <a-space size="middle">
                            <a-button type="primary" size="small" @click="handleEdit(record)">
                                编辑权限
                            </a-button>
                            <a-button type="primary" size="small" danger>
                                冻结权限
                            </a-button>
                        </a-space>
                    </template>
                </template>
            </a-table>
            <br>
            <a-pagination v-model:current="current" v-model:pageSize="pageSize" :total="total" show-size-changer
            @showSizeChange="showChange" @change="handlePageChange" />
        </div>

        <!-- 权限编辑模态框 -->
        <a-modal v-model:open="isModalOpen" title="编辑角色权限" okText="确定" cancelText="取消" @ok="handleOk"
            @cancel="handleCancel">
            <a-tree v-model:checkedKeys="checkedKeys" :tree-data="treeData" checkable :check-strictly="false" />
        </a-modal>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 搜索相关
const searchText = ref('');
let current = ref(1);
let pageSize = ref(10);
let total = ref(500);

// 表格数据
const permissionData = reactive([
    {
        id: '1',
        roleName: '管理员',
        description: '系统管理员，拥有所有权限',
        permissions: '全部权限',
    },
    {
        id: '2',
        roleName: '普通用户',
        description: '普通用户，拥有基础操作权限',
        permissions: '查看、创建',
    },
    {
        id: '3',
        roleName: '只读用户',
        description: '只读用户，仅拥有查看权限',
        permissions: '查看',
    },
]);

// 表格列定义
const columns = [
    {
        title: '角色名称',
        dataIndex: 'roleName',
        key: 'roleName',
    },
    {
        title: '角色描述',
        dataIndex: 'description',
        key: 'description',
    },
    {
        title: '拥有权限',
        dataIndex: 'permissions',
        key: 'permissions',
    },
    {
        title: '操作',
        key: 'actions',
    },
];

// 模态框相关
const isModalOpen = ref(false);
const checkedKeys = ref([]);
const currentRole = ref(null);

// 树形结构数据 - 权限列表，这里是菜单权限，进行二次开发的时候可以细化
// 这里的key就是菜单渲染时的index
const treeData = [
    {
        title: '仪表盘',
        key: '/home/dashboard'
    },
    {
        title: '富文本编辑器',
        key: '/home/word'
    },
    {
        title: '系统管理',
        key: 'system',
        children: [
            {
                title: '用户管理',
                key: '/home/user',
                children: [
                    { title: '查看用户', key: '/home/user/view' },
                    { title: '创建用户', key: '/home/user/add' },
                    { title: '编辑用户', key: '/home/user/edit' },
                    { title: '删除用户', key: '/home/user/delete' },
                ],
            },
            {
                title: '角色管理',
                key: '/home/role',
                children: [
                    { title: '查看角色', key: '/home/role/view' },
                    { title: '创建角色', key: '/home/role/add' },
                    { title: '编辑角色', key: '/home/role/edit' },
                    { title: '删除角色', key: '/home/role/delete' },
                ],
            },
            {
                title: '权限管理',
                key: '/home/permission',
                children: [
                    { title: '查看权限', key: '/home/permission/view' },
                    { title: '分配权限', key: '/home/permission/assign' },
                ],
            }
        ]
    },
];

// 搜索
const handleSearch = (value) => {
    console.log('搜索值:', value);
};

const handleEdit = (record) => {
    currentRole.value = record;
    isModalOpen.value = true;
    // 这里应该根据角色ID获取实际权限并设置checkedKeys
    // 示例中使用模拟数据
    if (record.id === '1') {
        checkedKeys.value = ['/home/dashboard', '/home/word', '/home/role', '/home/user', '/home/permission', 'user:view', '/home/user/add', '/home/user/edit', '/home/user/delete', '/home/role/view', '/home/role/add', '/home/role/edit', '/home/role/delete', '/home/permission/view', '/home/permission/assign'];
    } else if (record.id === '2') {
        checkedKeys.value = ['user:view', '/home/user/add', '/home/role/view', '/home/role/add'];
    } else {
        checkedKeys.value = ['user:view', '/home/role/view'];
    }
};

const handleOk = () => {
    console.log('选中的权限:', checkedKeys.value);
    console.log('为角色分配权限:', currentRole.value.roleName);
    isModalOpen.value = false;
    // 实际应用中这里应该有保存权限的逻辑
};

const handleCancel = () => {
    isModalOpen.value = false;
};

const handlePageChange = (page, page_size) => {
    console.log(page, page_size);
}

const showChange = (current, page_size) => {
    console.log(current, page_size);
}
</script>

<style scoped>
.permission-management {
    padding: 20px;
}

.page-header {
    margin-bottom: 20px;
}

.search-container {
    margin-bottom: 20px;
    width: 400px;
}

.permission-content {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    min-height: 400px;
}
</style>